<template>
    <el-card>
        <template #header>
            <div style="display: flex; justify-content: space-between;">
                <h4>帐号安全验证</h4>
                <el-button link @click="$emit('update:tab','')">
                    <el-icon>
                        <Close/>
                    </el-icon>
                </el-button>
            </div>
        </template>
        <div v-if="!userStore.account.email">
            <h5 style="margin-bottom: 1em">你正在进行敏感操作</h5>
            <div class="yellow-message">
                绑定邮箱后，你将可以通过 「邮箱+密码」 的方式登录
            </div>
            <div>
                <h5 style="padding-bottom: 1em">邮箱</h5>
                <div style="padding-bottom: 2em;position: relative">
                    <el-input placeholder="请输入邮箱" clearable
                              v-model="email" @blur="validateEmail" @change="validateEmail" @keydown.enter="finished"/>
                    <el-text style="position:absolute;bottom: 10%;left: 0" type="danger"
                             v-show="emailValidate.show">{{ emailValidate.message }}
                    </el-text>
                </div>
                <h5 style="padding-bottom: 1em">密码</h5>
                <div style="padding-bottom: 2em;position: relative">
                    <el-input placeholder="请输入账号密码" clearable  type="password" show-password
                              v-model="password" @blur="validatePassword" @change="validatePassword" @keydown.enter="finished"/>
                    <el-text style="position:absolute;bottom: 10%;left: 0" type="danger"
                             v-show="passwordValidate.show">{{ passwordValidate.message }}
                    </el-text>
                </div>
                <div style="text-align: right">
                    <el-button type="success" @click="finished">完成</el-button>
                </div>
            </div>
        </div>
        <div v-else>
            <h5 style="margin-bottom: 1em">你正在进行敏感操作，继续操作前请验证您的身份</h5>
            <div class="yellow-message">
                更换邮箱后，你将无法通过 「原邮箱+密码」 登录
            </div>
            <div>
                <h5 style="padding-bottom: 1em">新邮箱</h5>
                <div style="padding-bottom: 2em;position: relative">
                    <el-input placeholder="请输入新邮箱" clearable
                              v-model="email" @blur="validateEmail" @change="validateEmail" @keydown.enter="finished"/>
                    <el-text style="position:absolute;bottom: 10%;left: 0" type="danger"
                             v-show="emailValidate.show">{{ emailValidate.message }}
                    </el-text>
                </div>
                <h5 style="padding-bottom: 1em">密码</h5>
                <div style="padding-bottom: 2em;position: relative">
                    <el-input placeholder="请输入账号密码" clearable type="password" show-password
                              v-model="password" @blur="validatePassword" @change="validatePassword" @keydown.enter="finished"/>
                    <el-text style="position:absolute;bottom: 10%;left: 0" type="danger"
                             v-show="passwordValidate.show">{{ passwordValidate.message }}
                    </el-text>
                </div>
                <div style="text-align: right">
                    <el-button type="success" @click="finished">完成</el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import {ref} from 'vue'
import {Close} from "@element-plus/icons-vue";
import {useUserStore} from "@/stores/user";
const userStore = useUserStore()

import {updateAccountEmailApi} from "@/apis/account";
const emits = defineEmits(["update:tab"])

const password = ref("")
const email = ref("")

const passwordValidate = ref({
    show: false,
    message: ""
})
const emailValidate = ref({
    show: false,
    message: ""
})
const validatePassword = (event) => {
    passwordValidate.value.message = "请输入密码！"
    passwordValidate.value.show = event === "";
}
const validateEmail = (event) => {
    emailValidate.value.message = "请输入新邮箱！"
    emailValidate.value.show = event === "";
}
const finished = async () => {
    if (email.value === userStore.account.email) {
        emailValidate.value.message = "不能与原邮箱相同！"
        emailValidate.value.show = true
    } else if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(email.value)) {
        emailValidate.value.message = "邮箱格式错误！"
        emailValidate.value.show = true
    } else {
        await updateAccountEmailApi(password.value, email.value)
        if (!userStore.account.email) {
            ElMessageBox.alert("邮箱绑定成功，请重新登录！", "提示", {
                confirmButtonText: "确定",
                type: "success",
            }).finally(()=>userStore.reset())
        }else{
            ElMessageBox.alert("邮箱更换成功，请重新登录！", "提示", {
                confirmButtonText: "确定",
                type: "success",
            }).finally(()=>userStore.reset())
        }
    }
}
</script>

<style scoped lang="scss">
.yellow-message {
    padding: 1em 3em;
    background-color: #FFF8DB;
    font-size: 0.8em;
    color: #B58105;
    box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
    margin-bottom: 2em;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
}
</style>